/*
 * name: actionSheet.js
 * version: v0.2.0
 * update: 支持按钮icon定义
 * date: 2015-11-26
 * param:
 var actData = {
	titleText: 'Modify your album',
	buttons: [{
		text: '拍摄',
		icon: null,
		className: null
	}, {
		text: '选择图片',
		className: null
	}],
	destructiveText: '删除',
	cancelText: '取消',
	buttonClicked: function($target) {
		console.log('choose ' + $target.text());
		return true;
	},
	destructiveButtonClicked: function() {
		console.log('delete')
	},
	cancel: function() {
		console.log('cancel')
	},
	cancelOnStateChange: true,
	className: null
}
 */
define('actionSheet', function(require, exports, module) {
	seajs.importStyle('.action-sheet-wrapper {position: absolute; right: 0; bottom: 0; left: 0; width: 100%; margin: auto; -webkit-transition: all cubic-bezier(0.36, 0.66, 0.04, 1) .4s; transition: all cubic-bezier(0.36, 0.66, 0.04, 1) .4s;  -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0);}\
	.action-sheet-up { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}\
	.action-sheet {z-index: 11; overflow: hidden; width: auto; margin-right: .64em;  margin-left: .64em;}\
	.action-sheet .btn {font-size:1.5em; min-height: 3em; display: block; width: 100%; padding: 1px; color: #007aff; border-color: #d1d3d6; border-radius: 0; background-color: transparent;}\
	.action-sheet .btn:hover { color: #007aff;}\
	.action-sheet .btn.destructive { color: #ff3b30;}\
	.action-sheet .btn.destructive:hover { color: #ff3b30;}\
	.action-sheet .btn.active, .action-sheet .btn.activated {color: #007aff; border-color: #d1d3d6; background: #e4e5e7;  box-shadow: none;}\
	.action-sheet-has-icons .icon { position: absolute; left: 1.2em;}\
	.action-sheet-title {font-size: .9em;  padding: 1.2em; text-align: center; color: #8f8f8f;}\
	.action-sheet-group {overflow: hidden;  margin-bottom: .64em; border-radius: 4px; background-color: #fff;}\
	.action-sheet-group .btn { border-width: 1px 0 0 0;}\
	.action-sheet-group .btn:first-child:last-child { border-width: 0;}\
	.action-sheet-options { background: #f1f2f3;}\
	.action-sheet-cancel .btn { font-weight: 500;}\
	.action-sheet-open { pointer-events: none;}\
	.action-sheet-open.modal-open .modal { pointer-events: none;}\
	.action-sheet-open .action-sheet-backdrop { pointer-events: auto;}\
	', module.uri);
	//var $ = require('jquery');
	//var etpl = require('etpl');
	require('box');
	var actionTemp = '<div class="action-sheet-wrapper ${className}">\
			<div class="action-sheet action-sheet-has-icons">\
				<div class="action-sheet-group action-sheet-options">\
					<!-- if: ${titleText} -->\
					<div class="action-sheet-title ng-binding">${titleText}</div>\
					<!-- /if -->\
					<!-- for: ${buttons} as ${btn} -->\
					<button class="btn action-sheet-option ${btn.className}">\
						<!-- if: ${btn.icon} --><i class="ion">${btn.icon|raw}</i><!-- /if -->\
						${btn.text}</button>\
					<!-- /for -->\
					<!-- if: ${destructiveText} -->\
					<button class="btn destructive action-sheet-destructive">${destructiveText}</button>\
					<!-- /if -->\
				</div>\
				<!-- if: ${cancelText} -->\
				<div class="action-sheet-group action-sheet-cancel">\
					<button class="btn ng-binding" >${cancelText}</button>\
				</div>\
				<!-- /if -->\
			</div>\
		</div>';

	var actionSheet = function(data) {
		if(!$.isPlainObject(data) || !$.isArray(data.buttons) || !data.buttons.length){
			return console.warn('actionSheet参数错误');
		}
		if(data.cancelOnStateChange===void(0)){
			data.cancelOnStateChange = true;
		}
		var bodyOverFlow = $('body').css('overflow-y');
		$('body').css({
			height:'100%',
			overflow:'hidden'
		});
		var render = etpl.compile(actionTemp);
		var html = render(data);
		var actionSheetBox = $.box(html, {
			layout: false,
			setposi: false,
			onshow: function($this) {
				$this.addClass('action-sheet-up')
				.on('click', function(e) {
					e.preventDefault();
					var $this = $(e.target);
					//取消
					if ($this.parents('.action-sheet-cancel').length) {
						if (data.cancelOnStateChange) {
							setTimeout(function() {
								$.box.hide(actionSheetBox);
							}, 0);
						}
						typeof(data.cancel) === 'function' && data.cancel();
					}
					//删除
					if ($this.hasClass('action-sheet-destructive')) {
						if (data.cancelOnStateChange) {
							setTimeout(function() {
								$.box.hide(actionSheetBox);
							}, 0);
						}
						typeof(data.destructiveButtonClicked) === 'function' && data.destructiveButtonClicked();
					}
					//按钮
					if ($this.hasClass('action-sheet-option')) {
						if (typeof(data.buttonClicked) === 'function' && data.buttonClicked($this)) {
							setTimeout(function() {
								$.box.hide(actionSheetBox);
							}, 0);
						}
					}
				});
			},
			onclose:function(){
				$('body').css('overflow-y',bodyOverFlow);
			}
		});
	};
	module.exports = actionSheet;
});